<template>
	<div style="width: 1200px; margin: 0 auto">
		<div class="w-1200px " style="margin-bottom: 15px" >
				<SearchCurrencyComtenents
					@tagSelected="selected"
					:cateList="state.filterData" />
		</div>
		<!--商品展示页和右侧-->
		<el-row >
			<el-col :span="24">
<!--				<AnimeItemList-->
<!--					@queryItem="queryItem"-->
<!--					:query="state.query"-->
<!--					:itemList="state.itemList"-->
<!--				/>-->
				<DomesticAnimationItem :query="state.query" :itemList="state.itemList" @queryItem="queryItem"></DomesticAnimationItem>

				<div style="display: flex; justify-content: center; padding-top: 10px; margin-bottom: 20px">
					<el-pagination
						background
						:page-size="12"
						layout="prev, pager, next"
						:total="state.query.total"
						@current-change="handleCurrentChange"
					/>
				</div>
			</el-col>
<!--			<el-col :span="6" style="padding-top: 11px">-->
<!--				<HotTextComponents-->
<!--					title="那些年，我看过的！"-->
<!--					:hot-list="state.viewList" />-->
<!--			</el-col>-->
		</el-row>
	</div>
</template>

<style></style>
<script setup lang="ts">
import DomesticAnimationItem from '~/components/item/DomesticAnimationItem.vue'

const state = reactive(<any>{
	filterData:[],
	//条件查询
	query: {
		page: 1,
		pagesize: 12,
		total: 0,
		cateName:"",
	},
	//数据
	itemList: [],
	viewList: [],
})

/**
 * 父组件值
 * @param data
 */
function selected(data:any) {
	if (data.name === "类型"){
		state.query.cateName = data.value
		if (data.value ==='全部0'){
			state.query.cateName ="";

		}
	}
	itemInit()
}

function queryItem(value: any) {
	itemInit()
}
const handleCurrentChange = (val: number) => {
	state.query.page = val
	itemInit()
}
/**
 * 数据列表
 */
function itemInit() {
	const params = new URLSearchParams({
		page: state.query.page,
		pagesize: state.query.pagesize,
		cateName: state.query.cateName,
	});

	http.get(`/item/page?${params.toString()}`).then((res) => {
			state.itemList = res.data.list
			state.query.total = res.data.total
		})
}
/**
 * 钩子
 */
onMounted(() => {
	itemInit()
	init()
})

function init() {
	http.get(`/tag`).then((res:any) => {

		state.filterData = res.data
	})
	//浏览过的信息
	http.get(`/item/view?type=1`).then((res:any) => {
		state.viewList = res.data
	})
}

itemInit()
</script>
